<template>
    <div class="app-container">
        <!-- <div class="filter-container bor-container">
          <el-form size="mini" :model="formInline" :inline="true">
            <el-form-item prop="name">
              <el-input v-model="formInline.name" placeholder="请输入角色名"></el-input>
            </el-form-item>
            <el-button size="mini" @click="query()" type="primary" icon="el-icon-search">查询</el-button>
          </el-form>
        </div> -->
        <div class="filter-container btn-right">
            <el-button size="mini"  type="primary" @click="dialog.status = true" icon="el-icon-plus">添加广告</el-button>
        </div>
        <el-table v-loading="loading" border :data="tableData">
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column prop="advertisename" label="名称"></el-table-column>
            <el-table-column prop="name" label="位置">
                <template slot-scope="scope">
                      <span v-if="scope.row.positiontype === 0">不限</span>
                      <span v-else-if="scope.row.positiontype === 1">登录</span>
                      <span v-else-if="scope.row.positiontype === 2">注册</span>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="展示时间">
                <template slot-scope="scope">
                    {{scope.row.starttime}} - {{scope.row.endtime}}
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="状态">
                <template slot-scope="scope">
                    <el-tag type="success" size="mini" v-if="scope.row.onshow === 0">展示</el-tag>
                    <el-tag type="danger" size="mini" v-else-if="scope.row.onshow === 1">失效</el-tag>
                    <el-tag type="danger" size="mini" v-else-if="scope.row.onshow === 2">未展示</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button  size="mini" type="warning" @click="openEdit(scope.row)" icon="el-icon-edit-outline" >编辑</el-button>
                    <el-button size="mini"   @click="onDelete(scope.row, scope.$index)" icon="el-icon-delete" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
          class="pagination-right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.page"
          :page-sizes="[10]"
          :page-size="formInline.pagenum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="formInline.total">
        </el-pagination>
        <advertising-space-edit
          @close="close"
          @success="success"
          v-if="dialog.status"
          :id="dialog.id"
          :dialog_="dialog.status">
        </advertising-space-edit>
    </div>
</template>
<script>
import { getAdListAPI , deleteAdListAPI} from '@/api/operation'
import { mapGetters } from 'vuex'
import AdvertisingSpaceEdit from './components/AdvertisingSpaceEdit'
//import moment from 'moment'
export default {
    // 角色管理
    name: 'AdvertisingSpace',
    components: {
        AdvertisingSpaceEdit
    },
    data() {
        return {
            formInline: {
                name: '',
                page: 0,
                pagenum: 10,
                total: 0
            },
            dialog: {
                status: false,
                id: null
            },
            loading: false,
            tableData: []
        }
    },
    computed: {
        ...mapGetters([
            'buttons'
        ])
    },
    methods: {
        // 打开编辑页面
        openEdit(obj) {
            this.dialog.id = obj.id;
            this.dialog.status = true;
        },
        // 操作成功更新列表
        success() {
            this.getAdList();
        },
        close() {
            this.dialog.status = false;
            this.dialog.id = null;
        },
        // 下架
        Obtained(){
            this.$confirm('是否确认下架该banner图?下架后将不在前端显示', '提示', {
                confirmButtonText: '下架',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                obj.delLoading = true;
                deleteRoleAPI({ id: obj.Id}).then(res => {
                    obj.delLoading = false;
                    if (res.code === 0) {
                        this.$emit('success');
                        this.$message.success('操作成功');
                        this.getAdList();
                    } else {
                        this.$message.error(res.message);
                    }
                });
            });
        },
        // 删除角色
        onDelete(obj, index) {
            this.$confirm('是否删除该广告图?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                obj.delLoading = true;
                deleteAdListAPI({ id: obj.id}).then(res => {
                    obj.delLoading = false;
                    if (res.code === 0) {
                        this.$emit('success');
                        this.$message.success('操作成功');
                        this.getAdList();
                    } else {
                        this.$message.error(res.message);
                    }
                });
            });
        },
        // 点击查询事件
        query() {
            this.formInline.pageNum = 1;
            this.getAdList();
        },
        // pageSize发生改变触发
        handleSizeChange(val) {
            this.formInline.pageNum = 1;
            this.formInline.pageSize = val;
            this.getAdList();
        },
        // pageNum 发生改变触发
        handleCurrentChange(val) {
            this.formInline.page = val;
            this.getAdList();
        },
        // 获取列表
        getAdList() {
            this.loading = true;
            getAdListAPI(this.formInline).then(res => {
                this.loading = false;
                if (res.code === 0) {
                    this.tableData = res.data.list;
                    this.formInline.total = res.data.total;
                } else {
                    this.$message.error(res.message);
                }
            })
        }
    },
    mounted() {
      this.getAdList()
    }
}
</script>

